import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class UseEffectClass extends Component {
    state = { count: 0 }
    // 生命周期函数，页面挂载时开始执行
    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState(state => ({ count: state.count + 1 }))
        }, 2000)
    }
    add = ()=>{
		this.setState(state => ({count:state.count+1}))
        console.log("add函数被触发");
	}
    componentDidUpdate(){
        console.log("页面更新时触发");
    }
    unmount = ()=>{
		ReactDOM.unmountComponentAtNode(document.getElementById('root'))
	}
    // 页面卸载时执行
    componentWillUnmount(){
		clearInterval(this.timer)
	}
    render() {
        return (
            <div>
                <button className='returnButton'><a href="/">点击返回主菜单</a></button>
                <h1>useEffectClass</h1>
                <h2>当前求和为{this.state.count}</h2>
                <button onClick={this.add}>点我+1</button>
                <button onClick={this.unmount}>卸载组件</button>
            </div>
        )
    }
}
